<!-- 充值并支付 -->
<template>
  <div id="isShowRecharge">
    <van-popup v-model="isShowRecharge" position="bottom" round :style="{ height: '80%', background: '#f5f5f5'}" @close='close' closeable>
      <div class="margin-left-12 margin-right-12 t-l">
        <div class="f-bold f-16" style="line-height: 60px;">充值并支付</div>
        <div class="background-color-ffffff border-radius-10 padding-10">
          <p>订单金额：<em class="f-bold">{{ extInfo.orderNum }} 元</em></p>
          <p>当前可用{{ balanceLang }}：<em class="f-bold">{{ rechargeInfo.credit2 }} 元</em>，差 {{ lackNum }} 元</p>

        </div>
        <div class="background-color-ffffff border-radius-10 padding-10 margin-top-10">
          <div class="f-bold f-15">充值金额</div>
          <p class="f-13 margin-top-10" style="color: #6E6E79;line-height: 18px;">充值后将自动完成自动支付，如订单发生退款，退款金额退回到{{ balanceLang }}中！</p>

          <div class="sum border-radius-10 margin-top-10 f-bold f-24">
            {{ $i18n.t("money") }}<input type="number" v-model.trim="money" placeholder="请输入金额" />
          </div>
          <div class="activityItem margin-top-10" v-if="rechargeInfo.remark && rechargeInfo.remark.sale" style="grid-template-columns: 1fr 1fr 1fr;">
            <div class="acitem" v-for="(item, index) in rechargeInfo.remark.sale" :key="index" @click.stop="selectActivityNum(item.enough)">
              <div class="left f-20 f-bold"><small class="f-13">{{ $i18n.t("money") }}</small>{{ item.enough }}</div>
              <div class="right f-11">赠送{{ discountType(item.give) }}</div>
            </div>
          </div>

          <template v-if="rechargeInfo.remark && rechargeInfo.remark.recharge_activity_start">
            <p class="f-13 margin-top-10" style="color: #6E6E79;line-height: 18px;" >
              活动时间：{{ rechargeInfo.remark.recharge_activity_start }} 至 {{ rechargeInfo.remark.recharge_activity_end }}
            </p>
            <p class="f-13 margin-top-10" style="color: #6E6E79;line-height: 18px;"
              v-if="rechargeInfo.remark.recharge_activity_fetter == -1 || rechargeInfo.remark.recharge_activity_fetter == 0">
              不限
            </p>
            <p class="f-13 margin-top-10" style="color: #6E6E79;line-height: 18px;" v-else>参与次数：每人最多参与{{ rechargeInfo.remark.recharge_activity_fetter }}次</p>
          </template>
        </div>

        <div class="background-color-ffffff border-radius-10 padding-10 margin-top-10" v-if="rechargeInfo.sign_info && rechargeInfo.sign_info.contract_name">
          <div class="f-bold f-15 t-l" style="line-height: 28px;">合同信息</div>
          <template v-if="!rechargeInfo.sign_info.contract_id">
            <div class="f-13 c-999999 t-l">根据平台要求，您需完成以下合同签署后再充值{{ balanceLang }}！</div>
            <div class="f-bold f-16" style="line-height: 44px;">《{{rechargeInfo.sign_info.contract_name}}》</div>
            <van-button type="primary" round style="width: 125px;" size="small" @click="toSignV2">去签署</van-button>
          </template>
          <div v-else class="f-14 t-l">
            您已于 {{rechargeInfo.sign_info.signed_time}} 成功签署<em class="f-bold" style="color: #198BFB;" @click.stop="toSignDetail">《{{rechargeInfo.sign_info.contract_name}}》</em> ，点击合同名称可查阅！
          </div>
        </div>

        <div class="background-color-ffffff border-radius-10 padding-10 margin-top-10">
          <p class="line">充值方式</p>
          <ul class="choose_box">
            <li @click="confirm_post(btn.value, btn)" v-for="(btn, i) in rechargeInfo.buttons" :key="i">
              <i class="iconfont" :class="[btnclass(btn.value)]"></i>
              {{ btn.name }}{{ typename }}
            </li>
          </ul>
        </div>

        <div class="margin-top-10"></div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { yzPay } from "utils/yz_pay"; //引入支付方法
export default {
  mixins: [yzPay],
  props: {
    value: {
      type: Boolean,
      default: false
    },
    extInfo: {
      type: Object,
      default: ()=>{}
    },
  },
  data () {
    return {
      isShowRecharge: this.value,
      rechargeInfo: {},
      balanceLang: '余额',
      money: "",

      lackNum: ''
    };
  },
  watch: {
    value(val) {
      this.show = val;
      if (val) {
        this.getRechargeData();
      }
    }
  },

  activated() {},

  components: {},

  computed: {
    discountType(num) {
      return num => {
        num = num ? num : 0;
        if (this.rechargeInfo.remark && this.rechargeInfo.remark.proportion_status == 0) {
          return num + "元";
        } else {
          return num + "%";
        }
      };
    }
  },

  mounted() {},

  methods: {
    close() {
      this.$emit('input', false);
    },
    // 初始化参数
    async getRechargeData() {
      let { data, msg, result } = await $http.post("finance.balance.balance", {}, "");
      if (!result) return this.$toast(msg);
      this.rechargeInfo = data;
      this.balanceLang = this.fun.getBalanceLang();
      this.lackNum = (this.extInfo.orderNum - this.rechargeInfo.credit2).toFixed(2);
      this.isShowRecharge = true;
    },
    btnclass(type) {
      if (type == 1 || type == 6 || type == 9 || type == 12 || type == 20 || type == 22) {
        return "icon-balance_i";
      } else if (type == 2 || type == 10) {
        return "icon-balance_j";
      } else if (type == 18) {
        return "icon-balance_d";
      } else if (type == 19) {
        return "icon-balance_g";
      } else if (type == 140) {
        return "icon-guizhouyinhangjuhezhifu";
      } else {
        return "icon-balance_h";
      }
    },

    // 确认充值
    confirm_post(type,btn) {
      if(this.rechargeInfo.need_sign){
        this.$dialog.confirm({
          title: '温馨提示',
          confirmButtonText: '去签署',
          message: `根据平台要求，您需完成《${this.rechargeInfo.sign_info.contract_name}》合同签署后再充值${this.balanceLang}！`,
        })
          .then(() => {
            return this.$router.push(this.fun.getUrl("shopSignIndexV2",{scene: 7}));//余额充值签署合同
          })
          .catch(() => {});
        return;
      }

      this.pay_type = type;
      if (!this.money || this.money <= 0) {
        this.$dialog.alert({ message: "输入值不能小于0" });
        return;
      }
      if (Number(this.money) < Number(this.lackNum)) {
        this.$dialog.alert({ message: "输入值不能小于" + this.lackNum });
        return;
      }

      this.money = parseFloat(this.money);
      let url = "finance.balance.recharge";
      if (window.isMiniprogram) {
        url += "&client_type=2&app_type=wechat";
      }
      let _json = {
        pay_type: this.pay_type,
        recharge_money: this.money,
        order_pay_id: this.extInfo.order_pay_id
      };
      this.order_pay_id = this.extInfo.order_pay_id;
      this.order_sn = this.extInfo.pay_sn;


      if (this.store_id) {
        _json.store_id = this.store_id;
      }

      $http.post(url, _json, "正在充值").then(response => {
        if (response.result == 1) {
          if (this.pay_type == "88") {
            this.$dialog.alert({ message: "充值成功" }).then(() => {
              this.$router.go(-1);
            });
            return;
          }
          if (this.fun.isTextEmpty(response.data.ordersn) && this.pay_type != "140" && this.pay_type != "132") {
            this.$dialog.alert({ message: "参数错误" });
            return false;
          }
          this.ordersn = response.data.ordersn;
          this.rechargePay({
            pay_type: this.pay_type,
            data: response,
            ordersn: this.ordersn,
            type: 'balance',
            callback: () => {
              this.checkoutConsumePacket();
            }
          });
        } else {
          this.$dialog.alert({ message: response.msg });
          if (this.pay_type == 101) {
            if (response.data.eplus_bind_mobile == 1) {
              // 绑定手机
              this.$dialog
                .alert({
                  message: response.msg
                })
                .then(() => {
                  this.$router.push(this.fun.getUrl("wisdomBind", { option: "phone", to: "pay" }));
                });
            }
          }
        }
      });
    },

    selectActivityNum(num){
      this.money = num;
    },
    toSignV2(){
      this.$router.push(this.fun.getUrl("shopSignIndexV2",{scene: 7}));//余额充值签署合同
    },
    toSignDetail(){
      this.$router.push(this.fun.getUrl("signPage",{id: this.rechargeInfo.sign_info.contract_id}));//查看合同
    },
  }
};

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
.activityItem {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-row-gap: 10px;
      grid-column-gap: 10px;
      text-align: center;

      .acitem {
        font-size: 0.625rem;
        padding: 0.75rem 0;
        border-radius: 12px 12px 12px 12px;
        border: 1px solid #D6D6DC;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: var(--themeBaseColor);
        .right {
          color: #999999;
        }
      }
    }
    .padding-10 {
      padding: 0.625rem;
    }
    .margin-left-12 {
      margin-left: 0.75rem;
    }
    .margin-right-12 {
      margin-right: 0.75rem;
    }
    .margin-top-10 {
      margin-top: 0.625rem;
    }
    .border-radius-10 {
      border-radius: 0.625rem;
    }
    .background-color-#f5f5f5 {
      background-color: #f5f5f5;
    }
    .background-color-ffffff {
      background-color: #ffffff;
    }
    .sum {
      line-height: 3rem;
      display: flex;
      align-items: center;
      border: #D6D6DC 1px solid;
      padding: 0 0.75rem;

      input {
        margin-left: 0.5rem;
        border: none;
        font-size: 1.25rem !important;
      }
    }
    .line {
      border-left: 2px solid var(--themeBaseColor);
      line-height: 15px;
      padding-left: 0.5rem;
    }
    .choose_box {
      li {
        display: flex;
        align-items: center;
        line-height: 3.5rem;
        font-size: 16px;
        border-bottom: solid 1px #ebebeb;
        margin: 0 0.625rem;

        .icon-balance_d {
          color: #00908c;
        }

        .icon-balance_e {
          color: #64b42e;
        }

        .icon-balance_f {
          color: #fac337;
        }

        .icon-balance_g {
          color: #00508e;
        }

        .icon-balance_h {
          color: #fac337;
        }

        .icon-balance_i {
          color: #64b42e;
        }

        .icon-balance_j {
          color: #069ce7;
        }

        .iconfont {
          font-size: 1.5rem;
          margin-right: 0.625rem;
        }
      }

      li:last-child {
        border: none;
      }
    }
</style>